<template>
  <div class="community wrap">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="adver">
        <img src="../assets/img/guanggao1.jpg" />
      </div>
      <h2>附近美食</h2>
      <!-- 美食列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="eat_list">
          <ul>
            <li v-for="item in list" :key="item.id" @click="toDetails(item.id)">
              <div class="card">
                <img :src="item.imgUrl" class="card-img-top" />
                <div class="card-body">
                  <h4>{{ item.name }}</h4>
                  <h6>价格：{{ item.price }}</h6>
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getEatList } from "../api/api";
import { Toast } from "vant";
export default {
  // 定义属性
  name: "Community",
  data() {
    return {
      isLoading: false,
      loading: false,
      list:[],
      finished: false,
    };
  },
  methods: {
    // 查询列表
    getList() {
      getEatList({
        // news_tit: this.formInline.news,
      }).then((res) => {
        console.log(res);
        this.list = res.data;
        this.total = res.total;
      });
    },
    // 跳转商品
    toDetails(id) {
      this.$router.push({ path: "/details", query: { id: id } });
    },
    onRefresh() {
      setTimeout(() => {
        Toast.success("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    // 加载
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.community {
  .adver {
    img {
      width: 100%;
      height: 165px;
    }
  }
  h2 {
    font-size: 20px;
    font-weight: 500;
    padding: 10px;
  }
  .eat_list {
    ul {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 47%;
        border: 1px solid #ccc;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-bottom: 10px;
        .card {
          img {
            width: 100%;
            padding: 20px;
          }
          .card-body {
            padding: 10px;
            h4 {
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 5px;
            }
            h6 {
              font-size: 14px;
              color: red;
              margin-bottom: 5px;
            }
            p {
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    ul li span[data-v-fae5bece] {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
    }
  }
}
</style>